import { useEffect, useRef, useState } from 'react'
import { View, Image, Text, Input } from '@tarojs/components'
import { Picker } from '@tarojs/components'
import './index.scss'

interface MealProps {
    imageUrl: string
    energy: string
    gi: string
    object: string
    weight: string
}

interface ModalProps {
  imageUrl: string
  content: any,
  isLogin?: boolean
  onSubmit: (data) => void
  onCancel: () => void
}

const TaroModal = ({ imageUrl, content, onSubmit, onCancel,isLogin=true }: ModalProps) => {
  const modalRef = useRef<HTMLDivElement>(null)
  const [mealType, setMealType] = useState({
    label: '早餐',
    value: 1
  })

  const [editableValues, setEditableValues] = useState(content);

  const pickerRanges = [
    '早餐',
    '午餐',
    '晚餐',
    '零食'
  ];

  //定义一个热量的energyRange的方法,返回值是一个范围在0,50,100,150...到5000的整数变量
  const energyRange = Array.from({ length: 50 }, (_, i) => i * 50);

  const giRange = Array.from({ length: 200 }, (_, i) => i);
  

  const pickerRangesValues = [1,2,3,4];

  const handleEnergyChange = (item) => {
    console.log(item);
    const { detail } = item;
    setEditableValues({
      ...editableValues,
      energy: energyRange[detail.value]
    })
  }

  const handleGIChange = (item) => {
    console.log(item);
    const { detail } = item;
    setEditableValues({
      ...editableValues,
      gi: giRange[detail.value]
    })
  }

  const handlePickerChange = (item) => {
    console.log(item);
    const { detail } = item;
    setMealType({
      label: pickerRanges[detail.value],
      value: pickerRangesValues[detail.value]
    })
  }

  const handleSubmit = () => {
    const mealInfo = {
      ...editableValues,
      mealType: mealType.value
    };
    onSubmit(mealInfo);
  }

  useEffect(() => {
    const handleOutsideClick = (e: MouseEvent) => {
      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
        onCancel()
      }
    }

    document.body.style.overflow = 'hidden'
    document.addEventListener('mousedown', handleOutsideClick)

    return () => {
      document.body.style.overflow = ''
      document.removeEventListener('mousedown', handleOutsideClick)
    }
  }, [onCancel])

  return (
    <View className='modal-overlay'>
      <View ref={modalRef} className='modal-container'>
        {/* 使用项目图片组件并添加默认图 */}
        <Image 
          src={imageUrl || require('../../assets/meals/apple.png')}
          mode='aspectFill'
          className='modal-image'
        />
        
        <View className='modal-content'>
          <Text className='modal-title'>食材: </Text>
          <Input className='modal-texterea' value={editableValues.object}/>
          <Text className='modal-title'>预估重量(kg):</Text>
          <Input className='modal-input' type='number' defaultValue={editableValues.weight} onInput={(e) => setEditableValues({ ...editableValues, weight: e.detail.value })} />
          <View className='modal-column'>
            <View className='modal-row'>
              <Text className='modal-title'>预估热量(大卡): </Text>
              <Picker  mode='selector' defaultValue={editableValues.energy} range={energyRange} onChange={(item)=>{handleEnergyChange(item)}}> 
                <Input className='modal-input' value={editableValues.energy} disabled/>
              </Picker>
            </View>
            <View className='modal-row'>
            <Text className='modal-title'>预计GI: </Text>
            <Picker  mode='selector' defaultValue={editableValues.gi} range={giRange} onChange={(item)=>{handleGIChange(item)}}> 
              <Input className='modal-input' value={editableValues.gi} disabled/>
            </Picker>
            </View>
            
          </View>
          <Text className='modal-title'>类型: </Text>
          <Picker
            className='modal-text'
            mode='selector'
            range={pickerRanges}
            // value={pickerRangesValues}
            onChange={(item)=>handlePickerChange(item)}
          >
            <Input className='modal-input' value={mealType.label} disabled/>
          </Picker>
          { isLogin?(
            <View className='modal-actions'>
            <View 
              className='modal-button secondary'
              onClick={onCancel}
            >
              取消
            </View>
            <View 
              className='modal-button primary'
              onClick={handleSubmit}
            >
              提交
            </View>
          </View>
          ):(
            <View className='modal-actions'>
              <View 
                className='modal-button primary'
                onClick={onCancel}
              >
                确认
              </View>
            </View>
          )}
        </View>
      </View>
    </View>
  )
}

export default TaroModal